<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head th:include="ui/common/taglibs::head">
</head>
<body>
<div class="easyui-layout" data-options="fit:true">
		<div class="floating_layer">
	        <b class='fold_button fold_button_center' onclick='exPandTab(this)'>展开搜索</b>
	    </div>
		<div data-options="region:'north'" class="ycSearch searchArea" fit="true">
			<!-- 查询条件表单 -->
			<form id="search_form" >
				<div class="searchP searchPad">
					<em>登录名称：</em>
					<input type="text" name="loginName" class="easyui-textbox" data-options=""/>
				</div>
				<div class="searchP searchPad">
					<em>登录名称：</em>
					<input type="text" name="loginName" class="easyui-textbox" data-options=""/>
				</div>
				<div class="searchP searchPad">
					<em>登录名称：</em>
					<input type="text" name="loginName" class="easyui-textbox" data-options=""/>
				</div>
				<div class="searchP searchPad">
					<em>登录名称：</em>
					<input type="text" name="loginName" class="easyui-textbox" data-options=""/>
				</div>
				<div class="searchP searchPad">
					<em>登录名称：</em>
					<input type="text" name="loginName" class="easyui-textbox" data-options=""/>
				</div>
				<div class="searchP spButton">
					<p><a href="javascript:void(0)" class="sQuery" onclick=""></a></p>	
			 	</div>
			</form>
		</div>
		
		<div data-options="region:'center'" >
			<div class="easyui-layout ycBottom" data-options="fit:true">
				<!-- 进度条-->
           		<div class="layui-progress" lay-showpercent="true" lay-filter="demo">
					<div class="layui-progress-bar project-progress" lay-percent="100%"></div>
				</div>
				<div class="site-demo-button" style="margin-top: 20px; margin-bottom: 0;">
					<button class="layui-btn site-demo-active" data-type="setPercent">设置50%</button>
					<button class="layui-btn site-demo-active" data-type="loading">模拟loading</button>
				</div>    
			</div>
		</div>
			
</div>
<script type="text/javascript">
//注意进度条依赖 element 模块，否则无法进行正常渲染和功能性操作
layui.use('element', function(){
  var element = layui.element;
   //触发事件
  var active = {
    setPercent: function(){
      //设置50%进度
      element.progress('demo', '50%')
    }
    ,loading: function(othis){
      var DISABLED = 'layui-btn-disabled';
      if(othis.hasClass(DISABLED)) return;
    
      //模拟loading
      var n = 0, timer = setInterval(function(){
        n = n + Math.random()*10|0;  
        if(n>100){
          n = 100;
          clearInterval(timer);
          othis.removeClass(DISABLED);
        }
        element.progress('demo', n+'%');
      }, 300+Math.random()*1000);
      
      othis.addClass(DISABLED);
    }
  };
  $('.site-demo-active').on('click', function(){
    var othis = $(this), type = $(this).data('type');
    active[type] ? active[type].call(this, othis) : '';
  });
});
</script>
</body>
</html>
